<template>
	<view class="search" :style="{'background':bgColor}">
		<view class="search-content" @click="gotoSearch" :style="{'background':boxBgColor}">
			<view class="search-icon">
				<image src="@/static/img/msg/message/search.svg"></image>
			</view>
			<view class="search-text">
				<text>{{searchText}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			bgColor: {
				type: String,
				default: '#EDEDED'
			},
			boxBgColor: {
				type: String,
				default: '#fff'
			},
			searchText: {
				type: String,
				default: '搜索'
			}
		},
		data() {
			return {

			}
		},
		methods: {
			gotoSearch() {
				// /console.log(123)
				this.$emit('clickSearch')
			}
		}
	}
</script>

<style scoped lang="scss">
	.search {
		width: 100%;
		height: 100rpx;
		position: relative;
	}

	.search-content {
		position: absolute;
		top: 15rpx;
		width: 94%;
		height: 70rpx;
		// margin-top: 15rpx;
		margin-left: 3%;
		border-radius: 30rpx;
		display: flex;

		.search-icon {
			width: 12%;
			text-align: center;
			margin-top: 15rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.search-text {
			line-height: 70rpx;

			text {
				color: rgba(166, 166, 166, 1);
				font-size: 32rpx;
				font-weight: 500;
			}
		}
	}
</style>
